<template>
  <!-- 文件夹右键菜单 -->
  <div class="folder-rightmenu">
    <div class="menu-item" @click="handleOpen">打开</div>

    <a-popconfirm @confirm="handleRename">
      <a-icon slot="icon" type="folder-open" style="color: #999" />
      <a-input slot="title" v-model="folderName" size="small"></a-input>
      <div class="menu-item" @click.stop="() => {}">重命名</div>
    </a-popconfirm>
    <div class="menu-item" @click="handleDelete">删除</div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String
    }
  },
  data() {
    return {
      folderName: ''
    }
  },
  methods: {
    handleOpen() {
      this.$emit('open', {
        folderId: this.id,
        folderName: this.name
      })
    },
    handleRename() {
      if (this.folderName.trim() !== '') {
        this.$emit('rename', this.id, this.folderName)
      }
    },
    handleDelete() {
      this.$emit('delete', this.id)
    }
  },
  created() {
    this.folderName = this.name
  }
}
</script>
<style lang="less" scoped>
.folder-rightmenu {
  .menu-item {
    height: 48px;
    line-height: 48px;
    text-align: center;
    border-bottom: 1px dotted #ccc;
    transition: background 0.5s;
    user-select: none;
    &:hover {
      background-color: fade(@primary-color, 10%);
    }
  }
}
</style>
